<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  padding-bottom: 6.2rem;
  background-color: #f2f2f2;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7rem;
    background-color: #faeee2;
    .header_top {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 1rem;
      .round {
        width: 2rem;
        height: 2rem;
        background-color: var(--theme_color);
        border-radius: 2rem;
        line-height: 2.4rem;
        text-align: center;
        color: #fff;
        margin-right: 0.8rem;
      }
    }
  }

  .header2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 7rem;
    background-color: #f2f2f2;
    .header_top {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 1rem;
      .round {
        width: 2rem;
        height: 2rem;
        background-color: #c7c7c7;
        border-radius: 2rem;
        line-height: 2.4rem;
        text-align: center;
        color: #fff;
        margin-right: 0.8rem;
      }
    }
  }

  .details {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 11rem;
    padding: 2rem 0.5rem;
    background-color: #fff;
    .details_left {
      width: 28%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .details_right {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 0.5rem;
      width: 72%;
      height: 100%;
      .text {
        margin-top: 0.5rem;
      }
      .price {
        display: flex;
        justify-content: space-between;
        line-height: 2rem;
        .number {
          span:first-child {
            font-size: 1.2rem;
          }
          span:nth-child(2) {
            font-size: 1.6rem;
            color: #de1b26;
          }
        }
        .buttons {
          display: flex;
          .tuan1 {
            width: 5rem;
            height: 2rem;
            border-radius: 4px;
            border: 1px solid var(--theme_color);
            font-size: 1rem;
            color: var(--theme_color);;
            line-height: 2rem;
            text-align: center;
          }
          .tuan2 {
            width: 3rem;
            height: 2rem;
            margin-left: 0.5rem;
            border-radius: 4px;
            border: 1px solid var(--theme_color);
            font-size: 1rem;
            color: var(--theme_color);
            line-height: 2rem;
            text-align: center;
          }
        }
      }
    }
  }

  .people {
    width: 100%;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-top: 2px solid #dbdbdb;
    border-bottom: 2px solid #dbdbdb;
    .people_one {
      display: flex;
      width: 100%;
      height: 7.2rem;
      padding: 1.2rem 0.5rem;
      box-sizing: border-box;
      .active {
        overflow: hidden;
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 3.8rem;
        margin-right: 1rem;
      }
    }
    .people_two {
      display: flex;
      justify-content: center;
      font-size: 1.3rem;
      height: 2.4rem;
      color: #484848;
      i {
        font-size: 1.8rem;
        color: var(--theme_color);
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .people_three {
      // height: 2.4rem;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem 0.5rem;
      color: #484848;
      .pin_tuan {
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          width: 1.8rem;
          height: 1.8rem;
          background-color: var(--theme_color);
          color: #fff;
          line-height: 1.8rem;
          text-align: center;
          font-size: 0.8rem;
          margin: 0 0.5rem;
          box-shadow: 3px 0 3px rgba(0, 0, 0, 0.11);
        }
      }
    }

    .people_four {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 4rem;
      padding: 0 1rem;
      color: #fff;
      background-color: var(--theme_color);
      border-bottom: 1px solid var(--theme_color);

      .sanjiao {
        width: 0;
        height: 0;
        border-width: 0 0.8rem 0.8rem;
        border-style: solid;
        border-color: transparent transparent var(--theme_color);
        position: absolute;
        top: -0.8rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--theme_color);
        width: 100%;
        height: 100%;
        .time_left {
          display: flex;
          justify-content: center;
          align-items: center;
          .active {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 2.5rem;
            margin-right: 1rem;
            overflow: hidden;
            background-color: aqua;
          }
        }
      }
    }

    .people_four1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 4rem;
      padding: 0 1rem;
      color: #fff;
      background-color: #c5c5c5;

      .sanjiao {
        width: 0;
        height: 0;
        border-width: 0 0.8rem 0.8rem;
        border-style: solid;
        border-color: transparent transparent #c5c5c5;
        position: absolute;
        top: -0.8rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .time_left {
        display: flex;
        align-items: center;
        .active {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 2.5rem;
          margin-right: 1rem;
          overflow: hidden;
        }
      }
    }

    .people_five {
      padding: 0 1rem;
      display: flex;
      align-items: center;
      width: 100%;
      height: 6.5rem;
      background-color: #f2f2f2;
      .active {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 2.5rem;
        margin-right: 1rem;
        overflow: hidden;
      }
      span {
        color: #dadbd7;
      }
    }
  }

  .play {
    width: 100%;
    height: 7rem;
    display: flex;
    flex-direction: column;
    .play_up {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0.5rem 1rem;
      span:first-child {
        font-size: 1.3rem;
        color: var(--theme_color);;
      }
      span:nth-child(2) {
        font-size: 1.2rem;
        color: #6d6d6d;
      }
    }
    .play_down {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .play_number {
        display: flex;
        padding: 0 1.5rem;
        align-items: center;
        justify-content: space-between;
        color: #969696;
        .round {
          background-color: var(--theme_color);
          color: #fff;
          border: 1px solid #fff;
        }
        .tuan {
          color: var(--theme_color);;
        }
        div {
          box-sizing: border-box;
          width: 1.8rem;
          height: 1.8rem;
          border-radius: 1.8rem;
          line-height: 1.8rem;
          text-align: center;
          border: 1px solid #969696;
          padding: 0 0.3rem;
        }
        span {
          margin-left: 0.5rem;
        }
      }
    }
  }

  .know_clearly {
    width: 100%;
    height: 10rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    padding: 1rem 1rem;
    color: #969696;
    line-height: 1.6rem;
  }

  .invitation {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 4rem;
    background: -webkit-linear-gradient(top, #f2f2f2, var(--theme_color));
    border-radius: 4rem;
    line-height: 4rem;
    text-align: center;
    color: #fff;
    font-size: 1.7rem;
  }

  .navigation {
    position: fixed;
    box-sizing: border-box;
    bottom: 10rem;
    right: 1rem;
    width: 5rem;
    height: 9rem;
    background-color: #fd8701;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
    border-radius: 3px;
    .my_tuan {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      border-bottom: 1px solid #fff;
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    .img {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }
  }

  .show {
    height: auto;
    background-color: white;
    position: relative;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    img {
      width: 100%;
    }
    .posterHtml {
      // display: flex;
      #coverImg {
        display: flex;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
      }
      .imgBox {
        width: 100%;
      }
      .content {
        padding: 1.2rem;
        display: flex;
        height: 14rem;
        justify-content: space-between;
        .desc {
          word-wrap: break-word;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          .line1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
          }
          .line2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: #111;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp:2; /* 设置行数 */
            // -webkit-box-orient:vertical;
          }
        }
        .qrcode {
        }
      }
      .bottom-box {
        padding-bottom: 2rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }
  }

  .imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.98);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    img {
      width: 100%;
    }
    .tips {
      color: white;
    }
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }

  .vanPopup {
    box-sizing: border-box;
    .gift_pop {
      position: relative;
      box-sizing: border-box;
      display: flex;
      // border-top-left-radius: 5px;
      // border-top-right-radius: 5px;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      height: auto;
      background-color: white;
      position: relative;
      padding: 4rem 0;
      padding-left: 1.5rem;
      .activity {
        margin-bottom: 10px;
        font-size: 15px;
        color: var(--theme_color);
        font-size: 1.4rem;
      }
      .close-icon {
        position: fixed;
        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        bottom: 55%;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
    }
  }
}
</style>
<template>
  <div class="activityShow" :style="{ '--theme_color': theme_color }">
    <div
      class="header"
      v-if="status_name == '拼团成功' || status_name == '拼团中'"
    >
      <div class="header_top">
        <div class="round">
          <van-icon name="success" />
        </div>
        <span>{{ status_name }}</span>
      </div>
      <div class="header_bottom" v-if="status_name == '拼团中'">
        快去邀请好友加入吧
      </div>
      <div class="header_bottom" v-if="status_name == '拼团成功'">
        恭喜拼团成功！等待卖家发货
      </div>
    </div>

    <div class="header2" v-if="status_name == '拼团失败'">
      <div class="header_top">
        <div class="round">
          <van-icon name="cross" />
        </div>
        <span>{{ status_name }}</span>
      </div>
      <div class="header_bottom">
        未按时达到成团人数，可点击退款
      </div>
    </div>

    <div class="details">
      <div class="details_left">
        <img :src="activityItem.cover" alt="" />
      </div>
      <div class="details_right">
        <div class="text">{{ activityItem.title }}</div>
        <div class="price">
          <div class="number">
            <span>{{ val.group_num }}人团</span>
            <!-- 团员价 -->
            <span v-if="is_group == 2">￥{{ val.chief_price }}</span>
            <!-- 团长价  -->
            <span v-if="is_group == 1">￥{{ val.team_price }}</span>
          </div>
          <div class="buttons">
            <div class="tuan1" @click="detailsClick">团购详情</div>
            <!-- <div
              class="tuan2"
              @click="shareBtn"
              v-if="status_name == '拼团中'"
            >
              分享
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="people">
      <div class="people_one">
        <div class="active" v-for="item in groupList" :key="item.grouporder_id">
          <img :src="item.avatar" alt="" />
        </div>
        <div
          class="active"
          v-if="val.group_num - groupList.length == 0 ? false : true"
        >
          <img src="./../../../assets/img/pop.png" alt="" />
        </div>
      </div>
      <div class="people_two">
        <span v-if="status_name == '拼团中'"
          >还差
          <i>{{ val.group_num - groupList.length }}</i>
          人,赶紧召唤小伙伴来拼团~~</span
        >
        <span v-if="status_name == '拼团成功'" style="color: #fd8701">
          <van-icon name="fire" style="margin-right: 0.5rem" />
          拼团成功
        </span>
        <span
          v-if="status_name == '拼团失败'"
          style="color: #767676; margin-top: 0.5rem"
          >本团拼团失败</span
        >
      </div>
      <div class="people_three">
        <div class="pin_tuan" v-if="status_name == '拼团中'">
          剩余
          <span>{{ dd }}</span> 天 <span>{{ hh }}</span> ：
          <span>{{ mm }}</span> ：
          <span>{{ ss }}</span>
          结束
        </div>
        <div class="pin_tuan" v-if="status_name == '拼团成功'">
          用时
          <span>{{ DD }}</span> 天 <span>{{ HH }}</span> 时
          <span>{{ MM }}</span> 分 <span>{{ SS }}</span> 秒
        </div>
      </div>

      <template v-if="status_name == '拼团成功' || status_name == '拼团中'">
        <div
          class="people_four"
          v-for="item in groupList"
          :key="item.grouporder_id"
        >
          <div class="sanjiao" v-if="item.is_group == 1"></div>
          <div class="time">
            <div class="time_left">
              <div class="active">
                <img :src="item.avatar" alt="" />
              </div>
              <span>{{ item.nickname }}</span>
            </div>
            <div class="time-right">
              <span>{{ item.createtime }}</span>
            </div>
          </div>
        </div>
      </template>

      <template  v-if="status_name == '拼团失败'">
        <div class="people_four1" v-for="item in groupList"
          :key="item.grouporder_id">
        <div class="sanjiao"></div>
        <div class="time_left">
          <div class="active"><img :src="item.avatar" alt="" /></div>
          <span>{{ item.nickname }}</span>
        </div>
        <div class="time-right">
          <span>{{ item.createtime }}</span>
        </div>
      </div>
      </template>

      <div
        class="people_five"
        v-if="val.group_num - groupList.length == 0 ? false : true"
      >
        <div class="active">
          <img src="./../../../assets/img/pop.png" alt="" />
        </div>
        <span
          >还差{{
            val.group_num - groupList.length
          }}人,让小伙伴都来组团吧！</span
        >
      </div>
    </div>

    <div class="play">
      <div class="play_up">
        <span>活动介绍</span>
        <span @click="introduceClick">查看详情 ></span>
      </div>
      <div class="play_down">
        <div class="play_number">
          <div>1</div>
          <span>支付开团或参团</span>
        </div>
        <div class="play_number">
          <div :class="status_name == '拼团中' ? 'round' : ''">2</div>
          <span :class="status_name == '拼团中' ? 'tuan' : ''"
            >等待好友参团支付</span
          >
        </div>
        <div class="play_number">
          <div :class="status_name == '拼团成功' ? 'round' : ''">3</div>
          <span :class="status_name == '拼团成功' ? 'tuan' : ''"
            >达到人数参团成功</span
          >
        </div>
      </div>
    </div>

    <!-- <div v-for="item in introduce" :key="item.id">
      <div class="know_clearly" v-if="item.type == 'text'" v-html="item.value">
      </div>
    </div> -->

    <div
      class="invitation"
      @click="offeredClick"
      v-if="status_name == '拼团中' && p_openid"
    >
      立即参团
    </div>
    <div
      class="invitation"
      @click="shareBtn1"
      v-if="status_name == '拼团中' && !p_openid"
    >
      邀请好友来参团
    </div>
    <!-- <div class="invitation" @click="bodyClick" v-if="status_name == '拼团失败' || status_name == '拼团成功'">我要开团</div> -->

    <!-- <div class="navigation">
      <div class="my_tuan" @click="myGroup">我的团队</div>
      <div class="my_tuan" @click="orderGroup">我的订单</div>
      <div class="my_tuan" @click="envelopeGroup">红包排行</div>
    </div> -->

    <div class="mask" v-if="maskShow" @click="maskShow = false">
      <van-image class="img" width="40" height="300" :src="img" />
    </div>

    <!-- 分享蒙版 -->
    <share-mask v-if="cancelShow" @shareChange="shareChange" @cancelChange="cancelChange"></share-mask>


    <!-- 分享 -->
    <van-popup v-model="showPop" position="bottom" round>
      <div class="show">
        <span
          class="close-icon"
          :style="{ backgroundColor: theme_color }"
          @click="showPop = false"
          ><van-icon color="white" name="cross"
        /></span>
        <!-- 海报html元素 -->
        <div id="posterHtml" class="posterHtml">
          <img id="coverImg" :src="copyimg" />
          <div class="content">
            <div class="desc">
              <div class="line1">
                <span>快来参加</span>
                <van-icon class="margL-m" name="fire" :color="theme_color" />
              </div>
              <div class="line2">{{ activityItem.title }}</div>
            </div>
            <!-- 二维码 -->
            <canvas class="qrcode" id="qrCode-canvas"></canvas>
          </div>
          <div class="margT-l bottom-box">
            <div class="fs-16 t-bold">{{ activityItem.merchantname }}</div>
            <div class="color-m margT-m" style="display:flex; center;">
              <span></span>
              <span>本次活动 {{ activityItem.end_time }} 结束</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="padding-lr">
          <van-button
            :color="theme_color"
            block
            @click="createPoster"
            :loading="createLoading"
            >生成海报</van-button
          >
        </div>
      </div>
    </van-popup>
    <div class="imgBox" v-if="showImgPop">
      <img :src="createImg" />
      <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
      <span
        class="close-icon"
        :style="{ backgroundColor: theme_color }"
        @click="showImgPop = false"
        ><van-icon color="white" name="cross"
      /></span>
    </div>
    <!-- <Introduce></Introduce> -->
    <van-popup
      class="vanPopup"
      v-model="introduceShow"
      round
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: theme_color }"
          @click="introduceShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div class="activity">活动介绍</div>
        <div v-for="item in introduce" :key="item.id">
          <van-image
            v-if="item.type == 'img'"
            width="200"
            height="200"
            :src="item.value"
          />
          <div
            style="margin-bottom: 10px"
            v-if="item.type == 'text'"
            v-html="item.value"
          ></div>
        </div>

        <div style="margin-top: 10px">
          <div class="activity">活动时间</div>
          <div style="margin-top: 10px">
            {{ activityItem.start_time }} 至 {{ activityItem.end_time }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Button, Toast, Tab, Tabs, Icon, Dialog, Popup, Image } from "vant";
import img from "../../../assets/img/fengx.png";
import { stringify } from "qs";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import ShareMask from "@/components/ShareMask";
// import Introduce from "@/components/Introduce";
// import func from 'vue-editor-bridge';
// import utils from '@/assets/js/utils.js'

export default {
  name: "activityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [Image.name]: Image,
    ShareMask
    // Introduce,
  },
  data() {
    return {
      is_apply: false,
      showPop: false,
      showImgPop: false,
      createLoading: false,
      introduceShow: false,
      introduce: [],
      id: "",
      createImg: "",
      config: "",
      activityItem: {},
      val: {},
      img: img,
      activity_id: null,
      openid: "",
      p_openid: "",
      // 成员状态
      groupList: [],
      // 拼团状态
      status_name: "",
      maskShow: false,
      // 截止时间
      endtime: "",
      // 拼团成功耗费时间
      times: "",
      // 天时分秒
      dd: "00",
      hh: "00",
      mm: "00",
      ss: "00",
      // 用时天时分秒
      DD: "0",
      HH: "00",
      MM: "00",
      SS: "00",
      flag: false,
      starttime: "",
      orderItem: {},
      val: {},
      group_id: null,
      is_group: null,
      order_id: null,
      theme_color: '',
      copyimg: '',
      cancelShow: false,
    };
  },
  created() {
    // alert(Number(this.$route.params.id),this.openid, this.activity_id, 1111)
    this.group_id = Number(this.$route.params.id);
    this.openid = localStorage.getItem("COPENID");
    const Item = JSON.parse(localStorage.getItem("OrderItem"));
    // this.activity_id = Item.activityItem.activitys_id
    this.activity_id = this.$route.query.activity_id;
    // alert(this.activity_id)

    this.order_id = this.$route.query.order_id;
    // alert(this.order_id)
    console.log(this.orderItem, this.openid, "saveItem");
  },
  // computed: {
  //   getOpenId() {
  //     this.openid = this.$store.state.openid
  //     return this.openid
  //   }
  // },
  mounted() {
    if (this.status_name == "拼团中") {
      let time = setInterval(() => {
        if (this.flag == true) {
          clearInterval(time);
        }
        this.timeDown();
      }, 500);
    }

    const _this = this;

    _this.activityItem = _this.$store.state.activityItem;
    console.log(_this.activityItem, "_this.activityItem");
    // if(_this.activityItem){
    //   _this.shareInit(_this.activityItem)
    // }
    if (process.env.NODE_ENV == "production") {
      _this.openid = localStorage.getItem("COPENID");
      // alert("_this.openid:"+_this.openid)
    } else {
      _this.openid = _this.$store.state.openid;
    }

    // _this.getWeixinConfig()
    if (!_this.openid || _this.openid == "undefined") {
      _this.getWeixinConfig();
    } else {
      _this.getPageActItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
    }
    // 获取用户在后台管理系统中自定义的H5页面所显示的应用名称
    _this.ConfigItem();
  },
  methods: {
    // 分享按钮
    shareBtn1() {
      this.cancelShow = true
    },
    // 取消按钮
    cancelChange() {
      this.cancelShow = false
    },
    // 生成海报
    shareChange() {
      this.cancelShow = false
      this.shareBtn()
    },
    // 拼团介绍
    introduceClick() {
      this.introduceShow = true;
      console.log(this.introduceShow, 11);
    },
    // 查询团详情
    getGroupage() {
      let params = {
        activity_id: this.activity_id,
        openid: localStorage.getItem("COPENID"),
        group_id: this.group_id,
        order_id: this.order_id,
      };
      // alert('params'+ JSON.stringify(params))
      this.$request.groupPage(params).then((res) => {
        // alert('groupPage'+ JSON.stringify(res))
        //  if(res.ret != 200) return Toast.loading({
        //       forbidClick: true,
        //       message: '加载中...',
        //   });
        this.status_name = res.data.status_name;
        this.groupList = res.data.data;
        this.endtime = res.data.endtime;
        this.starttime = res.data.starttime;
        this.is_group = res.data.is_group;
        if (!res.data.endtime) return;
        if (this.status_name == "拼团成功") {
          this.times = res.data.times;
          console.log(this.times, "this.times");
          let DD = parseInt(this.times.split("天")[0]);
          let HH = parseInt(this.times.split("天")[1].split("时")[0]);
          let MM = parseInt(
            this.times.split("天")[1].split("时")[1].split("分")[0]
          );
          let SS = parseInt(
            this.times
              .split("天")[1]
              .split("时")[1]
              .split("分")[1]
              .split("秒")[0]
          );
          this.DD = DD > 9 ? DD : "0" + DD;
          this.HH = HH > 9 ? HH : "0" + HH;
          this.MM = MM > 9 ? MM : "0" + MM;
          this.SS = SS > 9 ? SS : "0" + SS;
        }
      });
    },
    timeDown() {
      const endTime = new Date(this.endtime).getTime();
      const nowTime = new Date(this.endtime);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        let dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        let hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        let mm = Math.floor((rightTime / 1000 / 60) % 60);
        let ss = Math.floor((rightTime / 1000) % 60);
        this.dd = dd > 9 ? dd : "0" + dd;
        this.hh = hh > 9 ? hh : "0" + hh;
        this.mm = mm > 9 ? mm : "0" + mm;
        this.ss = ss > 9 ? ss : "0" + ss;
      } else {
        this.isfail = true;
      }
    },

    // myGroup () {
    //   this.$router.push('/caseShow/groupBuying/GroupMy')
    // },
    detailsClick() {
      this.$router.push(
        "/caseShow/groupBuying/activityShow/" + this.activity_id
      );
    },
    // // 点击开团
    // bodyClick() {
    //   this.$router.push('/caseShow/groupBuying/activityShow')
    // },
    // // 点击我的订单
    // orderGroup() {
    //   this.$router.push('/caseShow/groupBuying/GroupOrder')
    // },
    // // 点击红包列表
    // envelopeGroup() {
    //   this.$router.push('/caseShow/groupBuying/GroupEnvelope')
    // },
    // 分享
    helpTimes() {
      const _this = this;
      console.log("_this.$route.query.p_openid", _this.$route.query.p_openid);
      _this.p_openid = _this.$route.query.p_openid;
      // if(status_name == '拼团成功' && _this.p_openid) {
      //   Toast('团员已满,可去活动页面开团或参团!')
      //   setTimeout(()=> {
      //     this.$router.push(
      //     "/caseShow/groupBuying/activityShow/" + this.activity_id
      //     );
      //   }, 800)
      // }
      console.log(_this.p_openid, "_this.p_openid");
    },
    // 参加拼团
    offeredClick() {
      this.group_id = Number(this.$route.params.id);
      this.$store.commit("setgroupId", this.group_id);
      this.$store.commit("setpopenid", this.p_openid);
      this.$store.commit("setThemeColor", this.theme_color);
      this.$router.push(
        `/caseShow/groupBuying/applyForm?activity_id=${this.activity_id}`
      );
    },
    ConfigItem() {
      const _this = this;
      let params = {};
      _this.$request.ConfigItem(params).then((res) => {
        _this.config = res.data.value;
        console.log("_this.config", _this.config);
      });
    },
    shareInit(activityItem) {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 需要使用的JS接口列表
        });
        let href = `${location.protocol}//${
          location.hostname
        }${location.href.indexOf('addons')>-1 ? '/addons/youmi_activitys/public' : ''}/plugin/index.html#/caseShow/${activityItem.model}/activityShow/${
          _this.group_id
        }?p_openid=${_this.openid}&order_id=${_this.order_id}&activity_id=${
          _this.activity_id
        }`;
        wx.updateAppMessageShareData({
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error) )
          },
        });
        let link = ''
        if(location.href.indexOf('staff_id') > -1) {
          link = location.href
        } else {
          link =  `${location.href}?staff_id=${this.staff_id}`
        }
        const dataShare = {
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error))
          },
        };
        wx.updateAppMessageShareData(dataShare);
        wx.updateTimelineShareData(dataShare);
        wx.error(function (error) {
          // alert(JSON.stringify(error))
        });
      });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    shareBtn() {
      this.toTop()
      const _this = this;
      let params = {
        id: _this.activity_id,
      }
      _this.$request.getActivityItembase64(params).then(res => {
        _this.copyimg = res.data
      })
      _this.showPop = true;
      _this.$nextTick(function () {
        _this.createQrcode();
      });
    },
    createPoster() {
      // 生成海报
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
        vm.showPop = false;
      });
    },
    createQrcode() {
      const _this = this;
      let href = `${location.protocol}//${
        location.hostname
      }${location.href.indexOf('addons')>-1 ? '/addons/youmi_activitys/public' : ''}/plugin/index.html#/caseShow/${_this.activityItem.model}/GroupDetails/${
        _this.group_id
      }?p_openid=${_this.openid}&order_id=${_this.order_id}&activity_id=${
        _this.activity_id
      }`;
      // new QRCode('qrcode', {
      //   width: 120, // 设置宽度，单位像素
      //   height: 120, // 设置高度，单位像素
      //   text: href // 设置二维码内容或跳转地址
      // })
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
          // _this.createPoster()
        }
      });
    },
    // 获取该活动的订单信息
    // getOrderItem() {
    //   const _this = this;
    //   let params = {
    //     openid: _this.openid,
    //     activity_id: _this.activity_id,
    //   };
    //   _this.$request.getOrderItem(params).then((res) => {
    //     const orderItem = res.data;
    //     if (orderItem.openid == this.openid) {
    //       _this.is_apply = true;
    //     }
    //     console.log("-----orderItem-----", orderItem.status);
    //     _this.$store.commit("setOrderItem", orderItem);
    //     // 获取订单列表，并判断是否有自己的订单
    //     // let orderList = res.data.val
    //     // console.log('-----orderList-----',orderList)
    //     // orderList.forEach(item=>{
    //     // 	if(item.openid==_this.openid){
    //     // 		_this.is_apply = true
    //     // 	}
    //     // })
    //     //      if(res.data.val&&res.data.val!=null&&res.data.val.length>0){

    //     //        _this.is_apply = true
    //     //      }
    //   });
    // },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        //_this.getCode(res.data.value.appid)
        _this.getCode(res.data.value.appid);
      });
    },
    getCode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setCode", code);
        _this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getFansItem(item) {
      console.log("fansItem:", item);
      const _this = this;
      let params = {
        openid: item.openid || _this.openid,
        nickname: item.nickname,
        name: item.nickname,
        avatar: item.avatar,
        province: item.province,
        city: item.city,
      };
      console.log("item.openid", item.openid);
      console.log("fansItem:", item);
      _this.$request.getFansItem(params).then((res) => {
        // 默认
        // _this.getOrderItem();
      });
    },
    getOpenId(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        const userInfo = res.data[0];
        // alert('userInfo:'+JSON.stringify(userInfo))
        const openid = userInfo.openid;
        _this.openid = openid;
        const nickname = userInfo.nickname;
        const headimgurl = userInfo.headimgurl;
        const province = userInfo.province;
        const city = userInfo.city;
        // const headimgurl = userInfo["headimgurl"];
        // const headimgurl = userInfo["headimgurl"];
        // const unionid = res.data.unionid;
        _this.$store.commit("setOpenid", openid);
        localStorage.setItem("COPENID", openid);
        // alert('COPENID:'+openid)
        const item = {
          openid,
          nickname,
          avatar: headimgurl,
          province,
          city,
          name: nickname,
        };
        _this.$store.commit("setUserInfo", item);
        localStorage.setItem("USERINFO", JSON.stringify(item));
        _this.getFansItem(item);
        _this.getPageActItem();
      });
    },
    judgeIsApply() {
      const _this = this;
      const apply_list = _this.activityItem.apply_list;
      // _this.openid = "111"
      const isApply = apply_list.some((res) => res.openid == _this.openid);
      this.activityItem.is_apply = isApply;
    },
    getPageActItem() {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中..",
      });
      localStorage.setItem("activity_id", Number(_this.$route.params.id));
      let params = {
        activity_id: _this.activity_id,
      };
      _this.$request.getPageActItem(params).then((res) => {
        _this.activityItem = res.data;
        // console.log(_this.activityItem, '_this.activityItem');
        _this.val = res.data.val;
        _this.introduce = res.data.introduce;
        _this.val.group_num = Number(_this.val.group_num);
        _this.endtime = res.data.end_time;
        _this.theme_color = res.data.theme_color
        setInterval(() => {
          this.timeDown(_this.endtime);
        }, 1000);
        _this.introduce = res.data.introduce;
        _this.create_form = res.data.create_form;
        document.title = _this.activityItem.title;
        if (_this.activityItem) {
          // _this.getOrderItem();
          _this.shareInit(_this.activityItem); // 调用微信分享的API
          console.log(_this.activityItem, 11111111);
          _this.helpTimes(_this.activityItem);
          _this.getGroupage();
        }
        _this.$store.commit("setActivityItem", _this.activityItem);
        document.title = _this.activityItem.title;
        toast.clear();
      });
    },
    toCaseView() {
      window.location.href = `//${location.hostname}${location.href.indexOf('addons')>-1 ? '/addons/youmi_activitys/public' : ''}/mobile/index.html`;
    },
  },
};
</script>